<template>
    <div>
        <div style="padding: 30px; background-color: #f3f3f3;">
            <div class="top">
                <h1>合同风险管理</h1>
            </div>
            <el-form style="height: 680px;" :model="formData" ref="vForm" label-position="left" label-width="150px" size="medium">
                <div class="static-content-item">
                    <el-divider direction="horizontal" content-position="left"></el-divider>
                </div>
                <div class="card-container">
                    <el-card style="{width: 100% !important}" shadow="hover" :body-style="{padding:'30px 20px 0px'}">
                        <div slot="header" class="clear-fix">
                            <span>基本信息</span>
                            <i class="float-right el-icon-arrow-down"></i>
                        </div>
                        <el-row>
                            <el-col :span="12" class="grid-cell">
                                <el-form-item label="合同编号" prop="e_hcode" class="label-right-align">
                                    <el-input v-model="formData.e_hcode" type="text" clearable :readonly="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="grid-cell">
                                <el-form-item label="合同名称" prop="e_hname" class="label-right-align">
                                    <el-input v-model="formData.e_hname" type="text" clearable :readonly="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="grid-cell">
                                <el-form-item label="供应商名称" prop="h_name" class="label-right-align">
                                    <el-input v-model="formData.h_name" type="text" clearable :readonly="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="grid-cell">
                                <el-form-item label="风险项" prop="rm_item" class="label-right-align">
                                    <el-select v-model="formData.rm_item" placeholder="请选择风险项" disabled class="readonly-select">
                                        <el-option v-for="dict in rm_items" :key="dict.dictValue" :label="dict.dictLabel" :value="Number(dict.dictValue)"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="grid-cell">
                                <el-form-item label="发生日期" prop="rm_happen_date" class="label-right-align">
                                    <el-date-picker v-model="formData.rm_happen_date" clearable type="date" value-format="yyyy-MM-dd" placeholder="请选择发生日期" :readonly="true"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="grid-cell">
                                <el-form-item label="风险说明" prop="rm_illustrate" class="label-right-align">
                                    <el-input type="textarea" v-model="formData.rm_illustrate" placeholder="请输入风险说明" :readonly="true"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
                <div class="static-content-item">
                    <el-alert title="" type="info" :closable="false" :center="false" :show-icon="false" effect="light"></el-alert>
                </div>
                <div class="card-container">
                    <el-card style="{width: 100% !important}" :body-style="{padding:'30px 20px 10px'}" shadow="hover">
                        <div slot="header" class="clear-fix">
                            <span>风险处理信息</span>
                            <i class="float-right el-icon-arrow-down"></i>
                        </div>
                        <el-row>
                            <el-col :span="24" class="grid-cell">
                                <el-form-item label="处理结果" prop="call" class="label-right-align">
                                    <el-input type="textarea" :rows="8" style="widows: 200%;" placeholder="请输入处理结果" v-model="formData.rm_handing_result" :readonly="formData.rm_status==2||formData.rm_status==3"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
                <div class="static-content-item">
                    <el-alert title="" type="info" :closable="false" :center="true" :show-icon="false" effect="light"></el-alert>
                </div>
                <div class="static-content-item">
                    <el-alert title="" type="info" :closable="false" :center="false" :show-icon="false" effect="light"></el-alert>
                </div>
                <el-row style="text-align: center;widows: 135%">
                    <el-col :span="18" class="grid-cell">
                        <el-button @click="submit" type="success" v-show="this.formData.rm_status==1">提交</el-button>
                        <el-button @click="ignore" type="info" v-show="this.formData.rm_status==1">忽略</el-button>
                        <el-button @click="fh">返回</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import {getRiskMonitor,updateRiskMonitor} from "@/api/system/riskMonitor";

export default{
    data(){
        return{
            formattedDate: null,
            //风险项字典数据
            rm_items: [],
            formData:{
                rm_id: this.$route.query.rm_id,
                e_hcode: null,
                e_hname: null,
                h_name: null,
                rm_item: null,
                rm_status: null,
                rm_illustrate: null,
                rm_happen_date: null,
                rm_handing_person: 'admin',
                rm_handing_result: null
            }
        }
    },
    comments:{},
    created(){
        this.getInfo()
        this.getDicts("bs_risk_monitoring_item").then(res=>{
            this.rm_items=res.data
        })
    },
    methods:{
        getInfo(){
            getRiskMonitor(this.formData.rm_id).then(res=>{
                console.log(res)
                this.formData.e_hcode=res.data.csContract.e_hcode
                this.formData.e_hname=res.data.csContract.e_hname
                this.formData.h_name=res.data.csSupplier.h_name
                this.formData.rm_item=res.data.rm_item
                this.formData.rm_illustrate=res.data.rm_illustrate
                this.formData.rm_happen_date=res.data.rm_happen_date
                this.formData.rm_status=res.data.rm_status
                this.formData.rm_handing_result=res.data.rm_handing_result
            })
        },
        fh(){
            this.$router.back()
        },
        getNow(){
            const date=new Date();
            const year=date.getFullYear();
            const month=String(date.getMonth()+1).padStart(2,'0');
            const day=String(date.getDate()+1).padStart(2,'0');
            this.formattedDate= `${year}-${month}-${day}`;
        },
        ignore(){
            this.formData.rm_status=3
            this.getNow()
            updateRiskMonitor({
                "rm_id":this.formData.rm_id,
                "rm_status":this.formData.rm_status,
                "rm_handing_person":this.formData.rm_handing_person,
                "rm_happen_date":this.formattedDate
            }).then(res=>{
                console.log(res)
                this.$modal.msgSuccess("忽略成功");
            })
        },
        submit(){
            this.formData.rm_status=2
            this.getNow()
            updateRiskMonitor({
                "rm_id":this.formData.rm_id,
                "rm_status":this.formData.rm_status,
                "rm_handing_person":this.formData.rm_handing_person,
                "rm_happen_date":this.formattedDate,
                "rm_handing_result":this.formData.rm_handing_result
            }).then(res=>{
                console.log(res)
                this.$modal.msgSuccess("提交成功")
            })
        }
    }
    
}
</script>


<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}
.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.top {
  width: 100%;
  height: 100px;
  background-color: white;

  h1 {
    float: left;
    font-size: 30px;
    margin: 37px 37px 37px 680px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
.readonly-select ::v-deep .el-input__inner {
  color: #606266;
}

div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}
</style>